<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    html,body{
      width: 100%;
      height: 100%;
    }
    .box{
      font-size: 45px;
      font-weight: 400;
      color:#999;
      position: absolute;
      left:50%;
      transform: translateX(-50%);
    }
    .box2{
      width: 100%;
      height: 100%;
      background-color: rgba(211, 206, 206, 0.5);  
      position: relative;
      display: none;
      
    }
    .box3{
      width: 500px;
      height: 280px;
      position: absolute;
      left:50%;
      top:50%;
      transform: translateX(-50%) translateY(-50%);
      background-color: white;
      box-shadow: 0px 0px 10px #999;
      cursor:move;
    }
    .box4{
      margin-top: 50px;
      margin-left: 50px;
      
    }
    .box5{
      margin: 30px 50px;
      padding-left: 14px;
    }
    input{
      width: 300px;
      height: 30px;
      outline: none;
    }
    .log{
      width: 200px;
      height: 40px;
      border:1px solid #999;
      font-size: 30px;
      margin: 0 auto;
      text-align: center;
      color:#666;
    }
    .close{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      position: absolute;
      right: -26px;
      top:-40px;
      text-align: center;
      line-height: 40px;
      background-color: white;
      box-shadow: 0px 0px 10px #999;
      cursor:pointer;
    }
  </style>
</head>
<body>  
  <div class="box">用户登录</div>
  <div class="box2">
    <div class="box3">
      <div class="box4"><span>用户名：</span><input type="text" placeholder="手机号/邮箱号"></div>
      <div class="box5"><span>密码：</span><input type="text" placeholder="请输入密码"></div>
      <div class="log">登录</div>
      <span class="close">关闭</span>
    </div>
  </div>
  <script>
    var box = document.querySelector('.box');
    var box2 = document.querySelector('.box2');
    var box3 = document.querySelector('.box3');
    var close = document.querySelector('.close');
    var user = document.querySelector('input:nth-child(2)');
    var password = document.querySelector('.box5 input:nth-child(2)');
    var log = document.querySelector('.log');
    box.onclick = function(){
      box2.style.display = 'block';
    };
    box3.onmousedown = function(e){
        e.e || window.event;
        var mouse_x = e.clientX - this.offsetLeft;
        var mouse_y = e.clientY - this.offsetTop;
        document.onmousemove = function(e){
          e.e || window.event;
          box3.style.left = e.pageX - mouse_x + 'px';
          box3.style.top = e.pageY -mouse_y + 'px';
        };
      };
    box3.onmouseup = function(){
      document.onmousemove = null;
    };
    close.onclick = function(){
      box2.style.display = 'none';
    };
    log.onclick = function(){
      if(user.value.length > 0 && password.value.length > 0){
        box2.style.display = 'none';
      }else{
        alert('不能有空项');
      }
    }
  </script>
</body>
</html>
